<template>
  <div class="bm-swipe-two">
    <div class="wrapper">
      <div class="header">
        <span class="title">斑马爱家数据总览(用户数据)</span>
      </div>
      <div class="history-bgimg">
        <div class="history-title">历史交易数据</div>
        <div class="history-wrapper">
          <div class="history-item">
            <p class="history-item-name">总交易笔数</p>
            <p
              class="history-item-num"
              id="totalNum"
            >{{total.totalCount}}</p>
          </div>
          <div class="history-item">
            <p class="history-item-name">总交易金额</p>
            <p
              class="history-item-num"
              id="totalPrice"
            >{{total.totalPrice}}</p>
          </div>
          <div class="history-item">
            <p class="history-item-name">总斑马券笔数/交易额</p>
            <p
              class="history-item-num"
              id="totalBmPrice"
            >{{total.bmqAllCount}}/{{total.bmqAllPrice}}</p>
          </div>
          <div class="history-item">
            <p class="history-item-name">总现金笔数/交易额</p>
            <p
              class="history-item-num"
              id="totalMoney"
            >{{total.xjAllCount}}/{{total.xjAllPrice}}</p>
          </div>
          <div class="history-item">
            <p class="history-item-name">总斑马券消耗数</p>
            <p
              class="history-item-num"
              id="totalBmDe"
            >{{total.bmqConnt}}</p>
          </div>
          <div class="history-item">
            <p class="history-item-name">总幸福币消耗数</p>
            <p
              class="history-item-num"
              id="totalXfbDe"
            >{{total.xfbCount}}</p>
          </div>
          <div class="history-item">
            <p class="history-item-name">总积分消耗数</p>
            <p
              class="history-item-num"
              id="totalScoreDe"
            >{{total.jfCount}}</p>
          </div>
        </div>
      </div>
      <div class="active-general">
        <div class="active-general-item active-general-left">
          <div
            id="todayNum"
            class="today-item"
          >
            <exchange
              pWidth="2.53rem"
              pHeight="0.92rem"
              :oneValue="String(todayObj.bmqAllCount)"
              :twoValue="String(todayObj.xjAllCount)"
              oneName="当日斑马券笔数"
              twoName="当日现金笔数"
              unit="笔"
              mxbId="exchangeTwo"
              v-if="flag"
            ></exchange>
          </div>
          <div class="today-desc">
            <div
              class="today-desc-top item"
              id="todayActiveNum"
            >
            当日斑马券笔数：{{todayObj.bmqAllCount}}笔
            </div>
            <div
              class="today-desc-bottom item"
              id="todayAllnum"
            >
            当日现金笔数：{{todayObj.xjAllCount}}笔
            </div>
          </div>
        </div>
        <div class="active-general-item active-general-left">
          <div
            id="todayPrice"
            class="today-item"
          >
            <exchange
              pWidth="2.53rem"
              pHeight="0.92rem"
              :oneValue="String(todayObj.bmqAllPrice)"
              :twoValue="String(todayObj.xjAllPrice)"
              oneName="当日斑马券交易额"
              twoName="当日现金交易额"
              unit="元"
              mxbId="exchangeThree"
              v-if="flag"
            ></exchange>
          </div>
          <div class="today-desc">
            <div
              class="today-desc-top item"
              id="todayActivePrice"
            >
            当日斑马券交易额：{{todayObj.bmqAllPrice}}元</div>
            <div
              class="today-desc-bottom item"
              id="todayAllPrice"
            >
            当日现金交易额：{{todayObj.xjAllPrice}}元</div>
          </div>
        </div>

      </div>
      <div class="order">
        <div class="order-num item">
          <div
            id="orderNum"
            class="order-num-wrapper"
          >
            <order-num :clientHeight="clientHeight" :clientWidth="clientWidth"></order-num>
          </div>
        </div>
        <div class="order-price item">
          <div
            id="orderPrice"
            class="order-price-wrapper"
          >
            <order-price :clientHeight="clientHeight" :clientWidth="clientWidth"></order-price>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import orderNum from 'src/component/orderNum'
import orderPrice from 'src/component/orderPrice'
import exchange from 'src/component/exchange'
import {getToadyPie} from 'src/api/api'
export default {
  components: {
    orderNum,
    orderPrice,
    exchange
  },
  props: {
    total: {
      type: Object,
      default: () => {}
    },
    clientHeight: {
      type: String,
      default: ''
    },
    clientWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      todayObj: {
        bmqAllCount: '--',
        xjAllCount: '--',
        bmqAllPrice: '--',
        xjAllPrice: '--'
      },
      flag: false
    }
  },
  created() {
    this._getTodayPie()
    setInterval(() => {
      setTimeout(() => {
        this._getTodayPie()
      }, 0)
    }, 5 * 60 * 1000)
  },
  methods: {
    _getTodayPie() {
      getToadyPie().then(res => {
        if (res.status === '0') {
          this.todayObj = res.result.data[0]
          this.flag = true
        }
      })
    }
  }
}
</script>

<style>
</style>
